<template>
  <view class="min-h-screen w-full max-w-[750rpx] bg-gray-50 mx-auto">
    <backView />

    <!-- 页面标题 -->
    <view class="bg-[#27c530] text-white p-[30rpx] rounded-b-[20rpx]">
      <text class="text-[32rpx] font-bold text-center block">{{PageItem.title}}</text>
    </view>

    <!-- 搜索栏 -->
    <!-- <view class="bg-white m-[24rpx] p-[24rpx] rounded-[20rpx] shadow-md">
      <view class="flex gap-[16rpx]">
        <nut-input v-model="searchForm.name" placeholder="搜索姓名" class="flex-1" />
        <nut-button type="success" @click="searchRecords">搜索</nut-button>
      </view>
    </view> -->

    <!-- 记录列表 -->
    <view v-if="records.length === 0" class="min-h-[400rpx] flex flex-col justify-center items-center py-[100rpx]">
      <text class="text-[56rpx] mb-[16rpx]">👤</text>
      <text class="text-[32rpx] text-gray-500 mb-[32rpx]">暂无记录</text>
      <nut-button type="success" @click="goAdd">添加第一条</nut-button>
    </view>

    <view v-else class="pb-[120rpx]">
      <view v-for="record in records" :key="record.id" class="bg-white m-[24rpx] rounded-[20rpx] shadow-md overflow-hidden cursor-pointer transition-all duration-300 active:scale-98" @click="goView(record.id)">
        <view class="p-[24rpx] border-b border-gray-100">
          <view class="flex justify-between items-start">
            <view class="flex items-center">
              <view class="w-[80rpx] h-[80rpx] rounded-full bg-[#adddaf] flex items-center justify-center mr-[20rpx]">

                <IconFont font-class-name="iconfont" class-prefix="icon" size="40" color="#008822" name="geren" />

              </view>
              <view>
                <text class="text-[28rpx] font-bold text-gray-800">{{ record.doctorName || '未填写姓名' }}</text>
                <text class="text-[24rpx] text-gray-500 block mt-[4rpx]">{{ record.doctorTel || '未填写电话' }}</text>
              </view>
            </view>
            <text class="text-[22rpx] text-gray-500">{{ formatDate(record.createTime) }}</text>
          </view>
        </view>

        <view class="p-[24rpx]">
          <view v-if="record.idNumber" class="mb-[12rpx]">
            <text class="text-[24rpx] text-gray-600">🆔 证件号码：{{ record.idNumber }}</text>
          </view>

          <!-- <view v-if="record.doctorName" class="mb-[12rpx]">
            <text class="text-[24rpx] text-gray-600">👨‍⚕️ 家庭签约医生：{{ record.doctorName }}</text>
          </view> -->

          <view v-if="record.note" class="mb-[12rpx]">
            <text class="text-[24rpx] text-gray-600">📝 备注：{{ record.note }}</text>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="p-[24rpx] border-t border-gray-100 flex gap-[16rpx]">
          <nut-button size="small" type="primary" class="flex-1 bg-[#27c530]" @click.stop="goView(record.id)">查看</nut-button>
          <nut-button size="small" type="primary" class="flex-1 bg-[#27c530]" @click.stop="goEdit(record.id)">编辑</nut-button>
          <nut-button size="small" type="danger" class="flex-1" @click.stop="deleteRecord(record.id)">删除</nut-button>
        </view>
      </view>
    </view>

    <!-- 悬浮添加按钮 -->
    <view class="flex items-center justify-center bg-[#27c530] rounded-full w-[90rpx] h-[90rpx] fixed bottom-[48rpx] right-[48rpx] z-[1000]" @click="goAdd">
     <IconFont name="plus" color="white" size="36" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { request } from '@/service/request'
import { IconFont } from '@nutui/icons-vue-taro'
import { PageItem } from './fields'
import { localStg } from '@/utils'
import backView from '@/components/backView.vue'

const records = ref<any[]>([])
const searchForm = reactive({
  name: ''
})

Taro.useDidShow(loadRecords)

async function loadRecords() {
  try {
    const obj = localStg.get("demographicInfo");
    const {error, success} = await request.get<any>(`${PageItem.commUrl}/list`, {
      recordid: obj.recordid
    }, {
      useErrMsg: true
    })
    
    if (success.records) {
      records.value = success.records || []
    }
  } catch (error) {
    console.error('加载数据失败:', error)
    Taro.showToast({ title: '加载数据失败', icon: 'error' })
  }
}

function searchRecords() {
  loadRecords()
}

function formatDate(dateStr: string) {
  if (!dateStr) return ''
  return new Date(dateStr).toLocaleDateString('zh-CN')
}

function goAdd() {
  Taro.navigateTo({
    url: './add'
  })
}

function goEdit(id: string) {
  Taro.navigateTo({
    url: `./edit?id=${id}`
  })
}

function goView(id: string) {
  Taro.navigateTo({
    url: `./view?id=${id}`
  })
}

async function deleteRecord(id: string) {
  try {
    const result = await Taro.showModal({
      title: '确认删除',
      content: '确定要删除这条记录吗？',
      confirmText: '删除',
      cancelText: '取消'
    })
    
    if (result.confirm) {
      await request.delete(`${PageItem.commUrl}/delete?id=${id}`, {}, {
        useErrMsg: true
      })
      
      Taro.showToast({ title: '删除成功', icon: 'success' })
      loadRecords()
    }
  } catch (error) {
    console.error('删除失败:', error)
    Taro.showToast({ title: '删除失败', icon: 'error' })
  }
}
</script>
